<template>
  <div class="app-container product-list">
    <div class="mdtop2">
      <temple-check   @getTemple="initTable"></temple-check>
    </div> 
    <div class="chartbox">
      <pie-chart :tableTitle="tableTitle" :axisData="axisData"></pie-chart> 
      <pie-chart :tableTitle="tableTitle2" :axisData="axisData2"></pie-chart>
    </div>
		<div style="hight:20px;"></div>
    <count-table :tableTitle="tableTitle" :axisData="axisData"></count-table>
    <count-table :tableTitle="tableTitle2" :axisData="axisData2" ></count-table> 
    
  </div> 
</template>
<script>
import templeCheck from "@/components/TempleCheck";
import countTable from "@/components/CountTable";
import pieChart from "@/components/PieChart";
import {  getExpendStatisticsByGoodsType,  getExpendStatisticsByShopGoodsType } from "../../api/expend";

export default {
  name: "Expend",
  components: { templeCheck, countTable ,pieChart},
  data() {
    return {
      tableTitle: "寺院库房支出统计(单位：元)",
      axisData: [],
      tableTitle2: "法务流通支出统计(单位：元)",
      axisData2: []
    };
  },
  methods: {
    initTable(templeId) {
      // console.log("initTable-templeId:", templeId);
      getExpendStatisticsByGoodsType(templeId).then(goodsTypeResp => {
        //  console.log('goodsTypeResp:',goodsTypeResp);
        if ( goodsTypeResp != null && goodsTypeResp.code == 0 &&  goodsTypeResp.data != null ) {
          this.axisData = goodsTypeResp.data.expendPieList;
        }
      });
      getExpendStatisticsByShopGoodsType(templeId).then(shopGoodsTypeResp => {
        //  console.log('shopGoodsTypeResp:',shopGoodsTypeResp);
        if ( shopGoodsTypeResp != null &&  shopGoodsTypeResp.code == 0 &&  shopGoodsTypeResp.data != null  ) {
          this.axisData2 = shopGoodsTypeResp.data.expendPieList;
        }
      });
    }
  },
  mounted() {
    this.initTable(0);
  }
};
</script>
